<!-- eslint-disable vue/multi-word-component-names -->
<script lang="ts" setup>
import { computed } from 'vue';
import type { DictDataOption } from '@/typings/global';

defineOptions({
  name: 'DictTag'
});

interface Props {
  /** Current language */
  type?: 'tag' | 'text' | 'badge';
  dicts?: Array<DictDataOption> | any; // 字典数据
  // eslint-disable-next-line vue/no-required-prop-with-default
  value: any;
}
const props = withDefaults(defineProps<Props>(), {
  type: 'badge',
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  dicts: [] as Array<DictDataOption>,
  value: '' // 字典数据
});
// const getMatchedData = (value: any): DictDataOption | undefined => {
//   const matched = props.dicts.find(item => item.value === value);
//   return matched;
// };
const getMatchedData = (value: any): DictDataOption | undefined => {
  if (!Array.isArray(props.dicts)) {
    return undefined; // or handle appropriately
  }
  const matched = props.dicts.find(item => String(item.value) === String(value));
  return matched;
};
const matchedData = computed(() => {
  return getMatchedData(props.value);
});
const convertBadge = (type: string) => {
  switch (type) {
    case 'primary':
      return 'info';
    default:
      return type;
  }
};
</script>

<template>
  <NSpace v-if="props.type === 'badge'" justify="center" inline size="small" align="center" :class="matchedData?.class">
    <!-- @vue-ignore -->
    <NBadge dot :type="convertBadge(matchedData.type)" />
    {{ matchedData?.label }}
  </NSpace>
  <!-- @vue-ignore -->
  <NTag v-else-if="props.type === 'tag'" :class="matchedData?.class" :bordered="false" :type="matchedData?.type">
    {{ matchedData?.label }}
  </NTag>
  <div v-else :class="matchedData?.class" :type="matchedData?.type">
    {{ matchedData?.label }}
  </div>
</template>

<style lang="scss" scoped></style>
